import { FC,useEffect, useState } from 'react';
import { Button,Input,Table,Form,Space,Dropdown, MenuProps, message, Popconfirm, Modal, Select,Pagination } from 'antd';
import {getdel, getlist, getstorlist,getdels} from '../apis/Stores';
import '../assets/css/Stores.css'
import Add from '../components/store/add'
import {baceUrl} from '../utils/config'
import type { ColumnsType } from 'antd/es/table';
import { DownOutlined, UserOutlined } from '@ant-design/icons';
import { ExclamationCircleOutlined } from '@ant-design/icons';
var total = 0
const Index:React.FC=()=>{
  const columns:ColumnsType<any> = [
    {
      title: 'id',
      dataIndex: 'id',              
      align:'center',
    },
    {
      title: '门店',
      dataIndex: 'name',
      align:'center',
      render: text => <a style={{textDecoration:'underline'}}>{text}</a>,
    },
    {
      title: '地址',
      dataIndex: 'address',
      align:'center',
    },
    {
      title: '门店LOGO',
      dataIndex: 'logo',
      align:'center',
      render:(_,record)=>(
        <Space size="middle">
        <img className={record.photo?'imgUrl':'imgUrlHide'} src={baceUrl+record.logo} />
        </Space>
      )
    },
    {
      title: '服务范围',
      dataIndex: 'services',
      align:'center',
    },
    {
      title: '店主',
      dataIndex: 'username',
      align:'center',
    },
    {
      title: '联系电话',
      dataIndex: 'mobile',
      align:'center',
    },
    {
      title: '营业时间',
      dataIndex: 'startTime',
      align:'center',
    },
    {
      title: '操作',
      dataIndex: 'id',
      align:'center',
      render: (row) => {
        return <Button type="primary" danger onClick={() => removeItem(row)}>删除</Button>
      }
    }
  ]
  const [list,setList] = useState<any>([]);
  const getData = async()=>{
    const res:any = await getlist(params).catch(()=>{})
    console.log(res)
    if(res.errCode === 10000){
      setList(res.data.list)
       total = res.data.counts
    }
  }
  // 查询
  interface Params{
    key:string,
    services:string,
    page:number,
    psize:number
  }
  const onSearchFinish = (values:any)=>{
    setParams({...params,...values});
  }
  const [params,setParams] = useState<Params>({key:'',services:'',page:1,psize:10})
  const getstorData = async()=>{
    const res:any = await getstorlist({}).catch(()=>{})
    console.log(res)
      setState(res.data.list)
  }
  const [state,setState] = useState<any>([])
  const handleChange = async(value:string,evt:any)=>{
    console.log(value,evt)
    setParams({...params,services:evt.name})
    console.log(params)
  }

  useEffect(()=>{
    getData()
    getstorData()
  },[params])

  // 删除
  const removeItem = (id:any) => {
    console.log(id)
    Modal.confirm({
        title: '是否删除此数据',
        content: `请谨慎操作`,
        okText:'确定',
        cancelText:'取消',
        async onOk(){
          let res:any = await getdel({id:id})
          console.log(res)
          if(res.errCode===10000){
            getData()
            message.success('删除成功')
          }
        },
        onCancel(){
          message.error('取消操作')
        }
    })
}

  // 批量删除
  const delAll =()=>{
    console.log(selectedRowKeys)
    Modal.confirm({
        title: '是否删除此数据',
        content: `请谨慎操作`,
        okText:'确定',
        cancelText:'取消',
         onOk:async()=>{
          console.log(selectedRowKeys)
          let res:any = await getdels({ids:selectedRowKeys})
          console.log(res)
          if(res.errCode===10000){
            getData()
            message.success('删除成功')
          }
        }, 
        onCancel(){
          message.error('取消操作')
        }
    })
  }
  // 选择框
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
// 分页
  const ange  = (a: any,  b: any)  =>  {
    console.log(a,  b);
      setParams({ ...params,  page: a,  psize:  b })
    }

  return (
      <div>
        <div id='box'>
          <p id='title'>门店</p>
        </div>
        <div className="list">
          <Form name="complex-form" className='form'  onFinish={onSearchFinish} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
            <div className='title'>门店</div>
            <Form.Item name='key'>
              <Input placeholder="门店名" />
            </Form.Item>
            <div className='title'>服务范围</div>
            <Form.Item name='type'>
              <Select 
                placeholder="请选择" 
                style={{width:'140px'}}
                onChange={handleChange}
                allowClear
                fieldNames={{label:'name',value:'id'}}
                options={state}
              />
            </Form.Item>
            <Form.Item name='key'>
              <Button htmlType='submit' type="primary">查询</Button>
            </Form.Item>
          </Form>
          <div style={{display:'flex'}}>
            <div><Add></Add></div>
            <Button className='btn' danger style={{marginLeft:'10px'}} onClick= {delAll} type="primary">批量删除</Button>
          </div>
          <Table  pagination={false} bordered className='table' rowKey="id" rowSelection={rowSelection} dataSource={list} columns={columns} />
              <div className="page" style={{textAlign:'center',marginTop:'30px'}}>
          <Pagination
              total={total}
              onChange={ange}
              showSizeChanger
              showQuickJumper
              showTotal={total => `共 ${total} 条数据`}
            />
        </div>
        </div>
      </div>
  );
}

export default Index;
// 防抖 节流都是用来控制某个函数在一定时间内的触发次数 避免资源浪费 
// 在登陆时我用到了防抖 因为登陆时账号验证rsize次数过于频繁，又是还会造成页面卡顿  防抖就是为了防止页面点击太快 发送请求过多 好处是它能够保证用户在频繁触发某些事件时 不会频繁执行回调 只执行一次 
// 节流我一般是在懒加载时使用 也是规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效。
// scroll-y="true" scroll-x="true" 设置x轴滚动还是y轴
// onReachBottom   上拉加载
// onPullDownRefresh  下拉刷新
